<template>
    <div class="container">
        <div class="login-wrap">
            <div class="login-container">
                <div class="logo">
                    <i class="iconfont el-icon-hand-logo"/>
                </div>
                <div class="title">账户密码登录</div>
                <el-form
                    :model="ruleform"
                    status-icon
                    :rules="rules"
                    ref="ruleform"
                    label-width="0">
                    <el-form-item prop="username">
                        <el-input
                            type="text"
                            v-model.trim="ruleform.username"
                            placeholder="账户"
                            autocomplete="off"
                            @keyup.native.enter="fnfocus('inputPwd')">
                            <i
                                slot="prefix"
                                class="iconfont icon-icon-yonghushuju" />
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            ref="inputPwd"
                            type="password"
                            placeholder="密码"
                            v-model.trim="ruleform.password"
                            @keyup.native.enter="login()">
                            <i
                                slot="prefix"
                                class="iconfont icon-icon-mima" />
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item prop="remember">
                        <el-checkbox
                            v-model="ruleform.remember"
                            true-label="1"
                            false-label="0">自动登录</el-checkbox>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button
                            class="login-btn"
                            type="primary"
                            @click="login()">登&nbsp;&nbsp;录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        let checkPass = (rule, value, callback) => {
            this.errMsgRemote = '';
            if (value.length < 6 || value.length > 18) {
                return callback(new Error('密码长度为6-18位'));
            }
            return callback();
        };

        return {
            dist: '',
            ruleform: {
                username: '',
                password: '',
                // remember: 0
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: checkPass, trigger: 'blur' }
                ]
            },

        };
    },
    methods: {
        fnfocus(name){
            this.$refs[name].focus();
        },
        login() {
            this.$refs['ruleform'].validate((valid) => {
                if (valid) {
                    this.$post('/__local/user%5Clogin', {
                        username: this.ruleform.username,
                        password: this.ruleform.password,
                        remember: ''
                    }, resp => {
                        if (resp.code == 1) {
                            // TODO 重新获取权限
                            this.getUserInfo();
                            if (this.dist) {
                                this.$router.push({ path: this.dist.path, query: this.dist.query });
                            } else {
                                this.$router.push({ path: '/' });
                            }
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                }
            });
        },
        getUserInfo() {
            this.$post('/__local/user_center%5Cget_user_info', {}, resp => {
                if (resp.code == 1) {
                    // console.log(resp.data);
                    // TODO 添加至vuex
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        //唯一登录,当用户被强制退出监听1004返回码给出提示信息
        getUrlParam () {
            let query = this.$route.query;

            if (query.only !== undefined) {
                if (query.only == true || query.only == 'true') {
                    this.$message({
                        type: 'warning',
                        message: '你的账号已在另一个地点登录',
                        center: true
                    });
                }
            }
        }
    },
    created() {
        this.getUrlParam();

        // 目标地址
        let dist = this.$route.params.dist;

        if (dist) {
            this.dist = dist;
        } else {
            dist = '';
        }
    }
};
</script>
<style lang="less" scoped>
    .container {
      width: 100vw;
      height: 100vh;
      overflow: auto;
      background-image: url(//cdn.zsdx.cn/admin/images/login/bg.png);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
    }
    .login-wrap {
      width: 100vw;
      height: 100vh;
      min-width: 368px;
      min-height: 500px;
    }
    .login-container {
      width: 368px;
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .logo {
      width: 80px;
      height: 80px;
      margin: 0 auto 68px;
      .iconfont{
          font-size: 80px;
          line-height: 80px;
          color: #1890FF;
      }
    }
    .title {
      height: 24px;
      font-size: 16px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 24px;
      margin-bottom: 34px;
      text-align: center;
    }
    .login-btn {
      width: 100%;
      font-size: 16px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 24px;
      padding: 7px 20px;
    }
    .icon-icon-yonghushuju,
    .icon-icon-mima{
        margin-left: 5px;
        font-size: 14px;
    }
</style>
<style lang="less">
.login-wrap {
    .el-form-item.is-success .el-input__inner{
        border-color: #409EFF;
    }
    .el-form-item.is-success .el-input__validateIcon{
        color: #409EFF;
    }
}
</style>
